<template>
  <el-dialog
    witdh="60%"
    title="接口详情"
    :close-on-click-modal="false"
    :visible="showDialog"
    @close="clickClose"
  >
    <el-form
      ref="apiFrom"
      :model="apiFrom"
      :rules="rules"
      class="apiFrom"
      width="200px"
      label-width="100px"
      :disabled="able"
    >
      <el-form-item label="环境名称" prop="name">
        <el-input v-model="apiFrom.name"></el-input>
      </el-form-item>

      <el-form-item label="接口类型">
        <el-select v-model="apiFrom.apimethod" placeholder="请选择">
          <el-option
            v-for="item in apiType"
            :key="item.id"
            :label="item.method"
            :value="item.method"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="接口路径">
        <el-input v-model="apiFrom.api"></el-input>
      </el-form-item>

      <el-form-item label="请求头">
        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5}" v-model="apiFrom.headers"></el-input>
      </el-form-item>

      <el-form-item label="请求体">
        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5}" v-model="apiFrom.body"></el-input>
      </el-form-item>

      <el-form-item label="返回值">
        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5}" v-model="apiFrom.response"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onUpdate">修改</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { updataApi, getApitype, getApiInfo } from "@/network/networks";
export default {
  data() {
    return {
      showDialog: false, //判断dlg是否展示
      rowid: 0, //用来取值各监听
      able: false, //判断是否可以编辑
      apiFrom: {
        name: "",
        apimethod: "",
        catid_id: 0,
        api: "",
        headers: "",
        body: "",
        response: ""
      },
      apiType: [],
      rules: {
        name: [
          { required: true, message: "请输入接口名称", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
        ]
      }
    };
  },

  mounted() {
    getApitype()
      .then(res => {
        if (res.code == 0) {
          this.$message.error(res.msg);
          return;
        }
        this.apiType = res.data;
      })
      .catch(err => {
        this.$message.error(err);
      });
  },

  methods: {
    //获取接口信息
    getApi() {
      
      getApiInfo({
        id: this.rowid
      })
        .then(res => {
          if (res.code == 0) {
            this.$message.error(res.msg);
            return;
          }
          this.$refs['apiFrom'].resetFields()
          this.apiFrom = res.data[0];
        })
        .catch(err => {
          this.$message.error(res.msg);
        });
    },

    //提交按钮
    onUpdate() {
        this.$refs['apiFrom'].validate((valid) => {
            if(!valid) {
                return;
            }
            updataApi(this.apiFrom).then(res => {
                if(res.code == 0){
                    this.$message.error(res.msg)
                    return
                }
                this.$message.success(res.msg)
                this.$parent.onSearch()
                this.clickClose()
            }).catch(err => {
                this.$message.error(res.msg)
            })
        })
    },

    //取消按钮
    onCancel() {
      this.clickClose();
    },

    //关闭dlg
    clickClose() {
      this.showDialog = false;
      this.able = false;
      this.rowid = -1
    }
  },

  watch: {
    rowid(val) {
      this.getApi();
    },

    able(val) {
      this.getApi();
    }
  }
};
</script>

<style lang="less" scoped>
</style>